<template>
  <div class="nowPlaying">
    <div class="topSwiper">
      <p class="swiperTitle">近期最受期待</p>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="item in list"
            :key="item.id"
            @click="toDetail(item.id)"
          >
            <img :src="item.img | imgfmt(85, 115)" alt="" />
            <h5 class="movieName">{{ item.nm }}</h5>
            <p class="movieTime">{{ item.rt }}</p>
            <span class="exponent">{{ item.wish }}想看</span>
            <div class="collect">
              <span class="heart"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="movieList">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.id">
          <van-card :thumb="item.img | imgfmt(66, 94)">
            <template #desc>
              <div class="movieBox">
                <div class="movieInfo" @click="toDetail(item.id)">
                  <div class="title">
                    <span class="titleName">{{ item.nm }}</span
                    ><span
                      class="title2D"
                      v-if="item.version == 'v2d imax'"
                    ></span>
                  </div>
                  <div class="want">
                    <span class="wantPeople">{{ item.wish }}</span
                    >人想看
                  </div>
                  <div class="protagonist">主演:{{ item.star }}</div>
                  <div class="time">上映时间:{{ item.comingTitle }}</div>
                </div>
                <div class="button">
                  <van-button round type="warning" v-if="item.wish > 40000">
                    想看
                  </van-button>
                  <van-button round type="info" v-else> 预售 </van-button>
                </div>
              </div>
            </template>
          </van-card>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import { getComingSoon } from '@/api/movies'
export default {
  data () {
    return {
      list: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
    },
    async getComingSoon () {
      const res = await getComingSoon()
      this.list = res.data.data.coming
    },
    toDetail (id) {
      this.$router.push({
        path: `/movieDetail/${id}`
      })
    }
  },
  mounted () {
    this.swiper = new Swiper('.swiper-container', {
      freeMode: true,
      slidesPerView: 'auto',
      spaceBetween: 10,
      observer: true, // 修改swiper自己或子元素时，自动初始化swiper
      observeParents: true // 修改swiper的父元素时，自动初始化swiper
    })
  },
  created () {
    this.getComingSoon()
  }
}
</script>
<style lang="scss" scoped>
.nowPlaying {
  margin-bottom: 50px;
  background: #f5f5f5;
  .topSwiper {
    background: #fff;
    padding: 12px 15px;
    margin-bottom: 10px;
    .swiperTitle {
      font-size: 14px;
      margin-top: 0px;
      margin-bottom: 12px;
    }
    .swiper-slide {
      width: 28%;
      height: 100%;
      position: relative;
      img {
        width: 100%;
        height: 115px;
      }
      h5,
      p {
        margin: 0;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .movieTime {
        margin-top: 3px;
        font-size: 12px;
        color: #999;
      }
      .exponent {
        font-weight: 700;
        color: #faaf00;
        font-size: 12px;
        position: absolute;
        bottom: 40px;
        left: 5px;
      }
      .collect {
        width: 28px;
        line-height: 28px;
        background: rgba(61, 63, 71, 0.6);
        text-align: center;
        border-bottom-right-radius: 10px;
        position: absolute;
        top: 0;
        left: 0;
        .heart {
          display: inline-block;
          width: 10px;
          height: 10px;
          background-size: 100%;
          background-repeat: no-repeat;
          background-image: url(https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/hot-tab/img/base64/notWish.png);
        }
      }
    }
  }
  .movieList {
    background: #fff;
    .van-list {
      margin-left: 15px;
      .van-cell {
        height: 125px;
        padding: 15px 15px 15px 0;
        .van-card {
          padding: 0;
          background: #fff;
          .van-card__thumb {
            height: 94px;
            width: 66px;
          }
          .van-image {
            width: 66px !important;
            height: 94px !important;
          }
          .van-card__content {
            .movieBox {
              display: flex;
              align-items: center;
              .movieInfo {
                width: 217px;
                .title {
                  .titleName {
                    font-size: 17px;
                    padding-right: 5px;
                  }
                  .title2D {
                    width: 43px;
                    height: 14px;
                    margin: 5px 3px 0 0;
                    display: inline-block;
                    background-image: url(https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/hot-tab/img/base64/v2dimax.png);
                    background-size: cover;
                  }
                }
                .want {
                  font-size: 13px;
                  .wantPeople {
                    font-weight: 700;
                    color: #faaf00;
                    font-size: 15px;
                  }
                }
                .protagonist {
                  font-size: 13px;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                }
                .time {
                  font-size: 13px;
                }
              }
              .button {
                width: 54px;
                text-align: center;
                .van-button {
                  width: 54px;
                  height: 28px;
                  font-size: 13px;
                  padding: 0px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
